<template>
  <search-panel
    ref="searchPanelRef"
    v-model="searchForm"
    :config="searchConfig"
    @query="handleQuery"
    @reset="handleReset"
  />
  <el-card>
    <data-table
      :config="tableConfig"
      :data-list="tableDataList"
      :data-count="tableDataCount"
      :pagination="tablePagination"
      @currentChange="handleCurrentChange"
      @sizeChange="handleSizeChange"
    >
      <template #header>
        <el-button type="primary" size="small" @click="handleTableHeaderAdd">
          <i class="el-icon-plus"></i> 添加员工
        </el-button>
      </template>
      <template #gender="scope">
        <el-tag size="medium" :type="scope.row.gender === 0 ? '' : 'danger'">
          {{ scope.row.gender === 0 ? '男' : '女' }}
        </el-tag>
      </template>
      <template #avatar="scope">
        <div style="line-height: 0">
          <el-image
            class="avatar-preview"
            :src="scope.row.avatar !== '' ? scope.row.avatar : $store.state.defaultAvatar"
            :preview-src-list="[scope.row.avatar !== '' ? scope.row.avatar : $store.state.defaultAvatar]"
            hide-on-click-modal
          >
          </el-image>
        </div>
      </template>
      <template #department="scope">
        {{ scope.row.department?.name ?? '未知部门' }}
      </template>
      <template #role="scope">
        {{ scope.row.role?.name ?? '未知角色' }}
      </template>
      <template #loginIp="scope">
        {{ scope.row.login_ip }}
      </template>
      <template #loginTime="scope">
        {{ $filters.formatTime(scope.row.login_time) }}
      </template>
      <template #status="scope">
        <el-tag size="medium" :type="scope.row.status === 1 ? 'success' : 'danger'">
          {{ scope.row.status === 1 ? '已启用' : '已禁用' }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button size="mini" type="text" @click="handleRowEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除？" @confirm="handleRowDelete(scope.row)">
          <template #reference>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </data-table>
  </el-card>
  <mm-dialog
    ref="mainDialogRef"
    :config="mainDialogConfig"
    :defaultData="mainDialogDefaultData"
    :rules="mainDialogValidateRules"
  >
    <template #footer>
      <el-button @click="handleDialogCancel">取 消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
    </template>
  </mm-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { PageOptions, usePage } from '@/hooks/use-page'
import * as staffApi from '@/api/company/staff'
import SearchPanel from '@/components/search-panel/index.vue'
import DataTable from '@/components/data-table/index.vue'
import MmDialog from '@/components/mm-dialog/index.vue'
import { searchConfig } from './config/search.config'
import { tableConfig } from './config/table.config'
import { dialogConfig as mainDialogConfig } from './config/main-dialog.config'
import { deepClone } from '@/utils/common'

export default defineComponent({
  name: 'Staff',
  components: { SearchPanel, DataTable, MmDialog },
  setup() {
    // 页面配置选项
    const pageOptions: PageOptions = {
      initStoreModule: 'staff',
      searchFormItems: searchConfig.formItems,
      dialogLayoutRows: mainDialogConfig.layout,
      checkPermissions: ['view', 'create', 'update', 'delete']
    }

    // 页面逻辑
    const {
      searchForm,
      searchPanelRef,
      tableDataList,
      tableDataCount,
      tablePagination,
      handleQuery,
      handleReset,
      handleCurrentChange,
      handleSizeChange,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      pagePermissions,
      getDataList,
      createData,
      updateData,
      deleteData
    } = usePage(staffApi, pageOptions)

    /**
     * 表格相关事件
     */
    // 表格工具栏 - 添加
    const handleTableHeaderAdd = () => {
      if (!pagePermissions['create']) {
        ElMessage.error('权限不足')
        return
      }
      mainDialogDefaultData.value = {}
      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 编辑
    const handleRowEdit = (row: any) => {
      if (!pagePermissions['update']) {
        ElMessage.error('权限不足')
        return
      }

      mainDialogDefaultData.value = deepClone(row)
      mainDialogRef.value?.visible(true)
    }

    // 行操作 - 删除
    const handleRowDelete = (row: any) => {
      if (!pagePermissions['delete']) {
        ElMessage.error('权限不足')
        return
      }
      deleteData(row.id)
    }

    /**
     * 主对话框相关事件
     */
    // 取消按钮
    const handleDialogCancel = () => {
      mainDialogRef.value?.visible(false)
    }

    // 确定按钮
    const handleDialogConfirm = () => {
      mainDialogRef.value?.validate((isValid) => {
        if (!isValid) {
          return
        }

        if (Object.keys(mainDialogDefaultData.value).length) {
          updateData(mainDialogDefaultData.value.id, mainDialogRef.value?.dialogForm)
        } else {
          createData(mainDialogRef.value?.dialogForm)
        }
      })
    }

    return {
      // 搜索部分
      searchConfig,
      searchForm,
      searchPanelRef,
      handleQuery,
      handleReset,
      // 表格部分
      tableConfig,
      tableDataList,
      tableDataCount,
      tablePagination,
      handleCurrentChange,
      handleSizeChange,
      handleTableHeaderAdd,
      handleRowEdit,
      handleRowDelete,
      // 对话框部分
      mainDialogConfig,
      mainDialogRef,
      mainDialogDefaultData,
      mainDialogValidateRules,
      handleDialogCancel,
      handleDialogConfirm
    }
  }
})
</script>
<style lang="less" scoped>
.avatar-preview {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
</style>
